<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="csrf_token" id="token" content="{{ csrf_token() }}">
    <title>上传部署点</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/css/add.css"/>
    <link rel="stylesheet" type="text/css" href="{{ env('CDN_DOMAIN_NAME') }}/webuploader/css/webuploader.css">
    <script src="https://yann.52mylife.cn/js/app.js"></script>
    <script type="text/javascript" src="{{ env('CDN_DOMAIN_NAME') }}/webuploader/dist/webuploader.js"></script>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=1.3&key=9a78e1fd6cb16ea2e249efa6ff52ab6f&plugin=AMap.Geocoder'></script>
    <script type="text/javascript"
            src="https://api.map.baidu.com/api?v=2.0&ak=oqyBjKGM57Maq2jDr64qx637kMd1wb4S"></script>
    <style>
        ol,li{
            text-decoration: none;
            list-style: none;
        }
        html,body{
            width:100%;
        }
        .container{
            width:95%;
        }
        html,body,.container{
            height:100%;
            background-color:#f1f1f1;
            margin:0 auto;
            overflow:hidden;overflow-y:auto;
        }
        h1{
            font-size:1.5rem;
            color:#B5B5B6;
            padding-top:1rem;
        }
        .info{
            width:90%;
            margin-left:5%;
            background-color:#f1f1f1;
            height:3rem;
            border:none;
            padding:1%;
            outline: none;
            font-size:1.2rem;
            color:#B5B5B6;
            line-height:2rem;
        }
        /*input::-webkit-input-placeholder,input:-moz-placeholder,input:-ms-input-placeholder{*/
            /*color:#bfbfbf;*/
            /*line-height:2rem;*/
            /*font-size:4rem;*/
        /*}*/
        input:-moz-placeholder,textarea:-moz-placeholder{color:#B5B5B6;font-size:1rem;}
        input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#B5B5B6;font-size:1rem;}
        input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#B5B5B6;font-size:1rem;}
        .create{
            margin-top:10%;
            width:70%;
            margin-left:15%;
            height:2rem;
            font-size:1rem;
            display: block;
            background-color:none;
            border-radius: 5px;
            line-height: 1.5rem;
            outline:none;
            border:1px solid #BFBFBF;
            margin-bottom: 50px;
        }
        .main_datum{
            width:90%;
            overflow: hidden;
            float: none;
            margin-left:5%;
            margin-right:5%;
            display: block;
        }
        .main_datum .main_news .news_li{
            background-color:#f1f1f1;
        }
        .main_datum .main_news .news_li .main_img{
            padding-left:0;
        }
        .main_datum .main_news .news_li .main_img img{
            float:left;width:32%;border:1px solid white;cursor: pointer;height:6rem;
        }
        .main_datum .main_news{
            padding-left:0;
        }
        input{
            width:90%;
            margin-left:5%;
            background-color:#f1f1f1;
            outline: none;
            border:none;
            display: block;
            height: 2rem;
            padding:1%;
            color:#B5B5B6;
            font-size:1rem;
        }
        .checkAddress{
            width:20%;
            float: left;
            border:1px solid #ccc;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            margin-top:5px;
            margin-right:5px;
            font-size:0.9rem;
            -webkit-appearance:none;
        }
        span{
            font-size:0.6rem;
            line-height:0.5rem;
        }
        .checkBox{
            display: block;
            clear: both;
        }
        .checkBox h4{
            float: left;
            color:#B5B5B6;
        }
        .checkUs{
            background-color:#f1f1f1;
            width:1rem;
            height:1rem;
            float: left;
            margin-top:1.6em;
        }
        #web_select{
            margin-left:5%;
            color:#b5b5b6;
            border:1px solid #b5b5b6;
        }
        #web_select1,#web_select2{
            color:#b5b5b6;
            border:1px solid #b5b5b6;
        }
        .hide_div{display: none}
        .sale_div p{
            margin-left:5%;
            color:#b5b5b6;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>上传地点资料</h1>
    <input type="text" placeholder="商家姓名" id="user_name" value="{{ $infos->username }}" />
    <input type="text" placeholder="手机号" id="phone" value="{{ $infos->user_tel }}" />
    <input type="text" placeholder="店铺名称(选填)" id="shop_name" value="{{ $infos->shop_name }}"/>
    <input type="text" placeholder="备注(选填)" id="describe" value="{{ $infos->shop_describe }}"/>
    <div class="sale_div">
        <p>地址：</p>
        @include('assembly.select')
        <div class="hide_div">
            <select class="address virtual_inp">

            </select>
            <ul class="virtualPeople">

            </ul>
        </div>
    </div>
    <textarea class="info" placeholder="详细地址(请严格按照标准地址名称填写)" id="address">{{ $infos->shop_area }}</textarea>
    <input class="checkAddress" type="button" value="检查地址" /><span></span>
    <div class="checkBox">
        @if($infos->type)
        <input class="checkUs" type="checkbox" checked/>
        @else
            <input class="checkUs" type="checkbox"/>
        @endif
        <h4>勾上即为竞争商家</h4>
    </div>

    <div class="main_datum">
         <ul class="main_news">
              <li class="news_li">
                   <ol class="main_img" >
                       @if($imgs && count($imgs)>0)
                           @foreach($imgs as $k=>$v)
                               <img src="{{ env('CDN_DOMAIN_NAME') }}/map_img/{{ $v->img_url }}" alt="">
                           @endforeach
                       @endif
                       <div class="li_jia" id="bus-upload-img"></div>
                   </ol>
              </li>
         </ul>
         <div class="imgdiv"></div>
    </div>
    <button class="create">提交</button>
</div>
</body>
<script>
    (function ($) {     //获取URL参数
        $.getUrlParam = function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]); return null;
        }
    })(jQuery);
    var geocoder = new AMap.Geocoder({
        city: "全国", //城市，默认：“全国”
        radius: 1000 //范围，默认：500
    });
    var lngLat;
    var lng;
    var lat;
    $(document).on("click",".checkAddress",function (){
        var address = $("#address").val();
        geocoder.getLocation(address, function(status, result){
            if (status === 'complete' && result.info === 'OK') {
                lngLat = result.geocodes[0].location.lat+","+result.geocodes[0].location.lng+"<br/>"+result.geocodes[0].formattedAddress;
                lng = result.geocodes[0].location.lng;
                lat = result.geocodes[0].location.lat;
                $("span").html(lngLat)
            }
        });
    });
    var checkUs = 0;
    $(document).on("click",".checkUs",function () {
        if ($(this).prop("checked")) {
            checkUs = 1;
        } else {
            checkUs = 0;
        }
    });
    $(document).on("click",".create",function (){
        var user = $("#user_name").val();
        var phone = $("#phone").val();
        var shop_name = $("#shop_name").val();
        var aeracode = $.getUrlParam('aeraCode');
        var id = $.getUrlParam('id');
        var descrobe = $("#describe").val();
        var address = $("#address").val();
        if(user == ""){
            alert("商家名为空！");
            return false;
        }
        if(!(/^[\u4e00-\u9fa5]{2,4}$/).test(user)){
            alert("商家名错误！");
            return false;
        }
        if(phone == ""){
            alert("手机号为空！");
            return false;
        }
        if(!( /^((0\d{2,3}-\d{7,8})|(1[35784]\d{9}))$/.test(phone))){
            alert("手机号或固定电话格式错误！固定电话请在区号后加“-”符号");
            return false;
        }
        if($("span").text() == ""){
            alert("请输入地址并且点击检查地址复查！这很重要！");
            return false;
        }
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
            },
            url:'/map/setMapInfos',
            data:{
                username:user,
                id:id,
                shop_name:shop_name,
                user_tel:phone,
                shop_area:address,
                lat:lat,
                lng:lng,
                type:checkUs
            },
            type:'post',
            dataType:'json',
            success:function(res){
                alert(res.msg);
                window.location.href="/map/mapIndex";
            }
        })
    })
</script>
<script>
    var domain = "{{ env('UPLOAD_IMG_DOMAIN') }}";
    var info_id = $.getUrlParam('id');
    var uploader = WebUploader.create({
        // 选完文件后，是否自动上传。
        auto: true,
        // fileNumLimit : 3 ,
        // swf文件路径
        swf: '/webuploader/dist/js/Uploader.swf',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
        },
        formData:{
            info_id:info_id
        },
        // 文件接收服务端。
        server: domain+'/map/uploadMapImg',
        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#bus-upload-img',
        duplicate :true,
        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes:'image/*'
        }
    });
    uploader.on( 'fileQueued', function( file ) {
        $('.main_img').show();
        var $li = $(
            '<li id=' + file.id + ' class="li_img" >' +
            '<img >' +
            '</li>'
            ),
            $img = $li.find('img');
        // $list为容器jQuery实例
        //$('.main_img').append( $li );
        $('.li_jia').before( $li );
        if($('.li_img').length>8){
            $('.li_jia').hide();
        }else{
            $('.li_jia').show();
        }
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        });

    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress span');
        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<p class="add_bar" style="margin-left: 0px"></p>')
                .appendTo( $li )
                .find('p');
        }
        $percent.css( 'width', percentage * 100 + '%' );

    });
    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file ,response) {
        // 创建缩略图
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
            }else{
                if(response.msg == '-1') {
                    $( '#'+file.id ).remove();
                    //alert('最多只能上传九张');
                    $(".user_tips").text('最多只能上传九张');
                    /*删除图片*/
                    $(".user_tips").show(0).delay(1000).hide(0);
                }else if(response.msg == '-2'){
                    $( '#'+file.id ).remove();
                    //alert('图片大小超出最大限额');
                    $(".user_tips").text('图片大小超出最大限额');
                    /*删除图片*/
                    $(".user_tips").show(0).delay(1000).hide(0);
                }else{
                    $('#' + file.id).children('img').attr('id', response.data);
                    $('#' + file.id).children('img').attr('class', 'delete-img');
                }
            }
        }, 200, 200 );
        $( '#'+file.id ).addClass('upload-state-done');
    });
    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');
        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<p class="add_fail"></p>').appendTo( $li );
        }
        $error.text('图片过大,上传失败');
        $('#' + file.id).children('img').attr('class', 'error-img');
        if($('.li_img').length>8){
            $('.li_jia').hide();
        }else{
            $('.li_jia').show();
        }
        $('.add_fail').parent('.li_img').click(function(){
            var that=$(this);
            $(".delDiv").show();
            $(".mask").show();
            $("#btnDelTrue").click(function(){
                $(".delDiv").hide();
                $(".mask").hide();
                that.remove();
                $(".expurgate").text('删除成功');
                /*删除图片*/
                $(".expurgate").show(0).delay(1000).hide(0);
                if($('.li_img').length>8){
                    $('.li_jia').hide();
                }else{
                    $('.li_jia').show();
                }
            })
        })
    });
    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.add_bar').remove();
    });


    $(document).on('click','.main_img img',function () {
        var src = $(this).attr('src');
        $(this).css("cursor","pointer");
        window.location.href=src
    });
</script>
<script type="text/javascript" src="{{ env('CDN_DOMAIN_NAME') }}/js/default.js"></script>
</html>